<template>
  <div class="ele-body">
    <a-card :bordered="false" title="首饰采购信息">
      <table cellpadding="0" cellspacing="0" class="recepit_table2">
        <tbody>
          <tr>
            <td class="tit">单号</td>
            <td>{{ receipts_detail.code || '' }}</td>
            <td class="tit">货品数量</td>
            <td>1</td>
            <td class="tit">修改原因</td>
            <td>{{ receipts_detail.alter_cause || '' }}</td>
            <td class="tit">备注</td>
            <td>{{ receipts_detail.note || '' }}</td>
          </tr>
          <tr>
            <td class="tit">制单人</td>
            <td>{{ receipts_detail.make_user_name || '' }}</td>
            <td class="tit">业务日期</td>
            <td>{{ receipts_detail.business_time || '' }}</td>
            <td class="tit">审核人</td>
            <td>{{ receipts_detail.verify_user_name || '' }}</td>
            <td class="tit">状态</td>
            <td class="ele-text-primary">{{
              receipts_detail.status_name || ''
            }}</td>
          </tr>
        </tbody>
      </table>
      <div class="margin-y-30">
        <a-form
          class="margin-y-15"
          :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
          :wrapper-col="{
            md: { span: 17 },
            sm: { span: 20 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="24" :sm="24" :xs="24">
              <div style="height: 611px; overflow-y: scroll">
                <table cellpadding="0" cellspacing="0" class="recepit_table">
                  <tbody>
                    <tr>
                      <td
                        class="fw-bolder"
                        colspan="7"
                        style="
                          background-color: #f5f5f5;
                          border-right: 1px solid #f5f5f5;
                        "
                      >
                        货品详情
                      </td>
                      <td
                        class="ele-text-primary text-right"
                        style="background-color: #f5f5f5"
                        ><!-- <a class="margin-right-15">修改</a> --></td
                      >
                    </tr>
                  </tbody>
                </table>
                <table cellpadding="0" cellspacing="0" class="recepit_table">
                  <tbody>
                    <tr>
                      <td
                        class="fw-bolder"
                        colspan="6"
                        style="border-right: 1px solid transparent"
                        >基本资料</td
                      >
                      <td class="ele-text-primary text-right" colspan="2">
                        <a-checkbox @change="change1"
                          ><a class="ele-text-primary fs-14"
                            >不显示未修改数据</a
                          ></a-checkbox
                        >
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table cellpadding="0" cellspacing="0" class="recepit_table">
                  <tbody>
                    <tr>
                      <td style="background-color: #f5f5f5">属性名称</td>
                      <td style="background-color: #f5f5f5">修改前</td>
                      <td style="background-color: #f5f5f5">修改后</td>
                    </tr>
                    <tr
                      v-for="(item, index) in alter"
                      :key="item.alter_key"
                      v-show="item.is"
                    >
                      <td>{{ item.label }}</td>
                      <template v-if="item.alter_show && item.alter_show == 1">
                        <td :class="{ mohu: item.secret == 1 }">
                          <template v-if="item.alter_key == 'thumb'">
                            <img
                              :src="item.alter_before_name"
                              style="width: 50px; height: 50px"
                              v-if="item.alter_before_name"
                            />
                          </template>
                          <template v-else>
                            {{ item.alter_before_name }}
                          </template>
                        </td>
                        <td :class="{ mohu: item.secret == 1 }">
                          <template v-if="item.alter_key == 'thumb'">
                            <img
                              :src="item.alter_after_name"
                              style="width: 50px; height: 50px"
                              v-if="item.alter_after_name"
                            />
                          </template>
                          <template v-else>
                            {{ item.alter_after_name }}
                          </template>
                        </td>
                      </template>
                      <template v-else>
                        <td :class="{ mohu: item.secret == 1 }">
                          <template v-if="item.alter_key == 'thumb'">
                            <img
                              :src="item.alter_before"
                              style="width: 50px; height: 50px"
                            />
                          </template>
                          <template v-else>
                            {{ item.alter_before }}
                          </template>
                        </td>
                        <td :class="{ mohu: item.secret == 1 }">
                          <template v-if="item.alter_key == 'thumb'">
                            <img
                              :src="item.alter_after"
                              style="width: 50px; height: 50px"
                            />
                          </template>
                          <template v-else>
                            {{ item.alter_after }}
                          </template>
                        </td>
                      </template>
                    </tr>
                  </tbody>
                </table>

                <div>
                  <div class="flex align-center justify-between margin-y-15">
                    <div class="fs-16 fw-bolder flex1">主石1信息</div>
                    <a-checkbox @change="change2"
                      ><a class="ele-text-primary fs-14"
                        >不显示未修改数据</a
                      ></a-checkbox
                    >
                  </div>
                  <div>
                    <table
                      cellpadding="0"
                      cellspacing="0"
                      class="recepit_table"
                    >
                      <tbody>
                        <tr>
                          <td style="background-color: #f5f5f5">属性名称</td>
                          <td style="background-color: #f5f5f5">修改前</td>
                          <td style="background-color: #f5f5f5">修改后</td>
                        </tr>
                        <tr
                          v-for="(item, index) in main_first"
                          :key="item.alter_key"
                          v-show="item.is"
                        >
                          <td>{{ item.label }}</td>
                          <template
                            v-if="item.alter_show && item.alter_show == 1"
                          >
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before_name
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after_name
                            }}</td>
                          </template>
                          <template v-else>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after
                            }}</td>
                          </template>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div>
                  <div class="flex align-center justify-between margin-y-15">
                    <div class="fs-16 fw-bolder flex1">主石2信息</div>
                    <a-checkbox @change="change3"
                      ><a class="ele-text-primary fs-14"
                        >不显示未修改数据</a
                      ></a-checkbox
                    >
                  </div>
                  <div>
                    <table
                      cellpadding="0"
                      cellspacing="0"
                      class="recepit_table"
                    >
                      <tbody>
                        <tr>
                          <td style="background-color: #f5f5f5">属性名称</td>
                          <td style="background-color: #f5f5f5">修改前</td>
                          <td style="background-color: #f5f5f5">修改后</td>
                        </tr>
                        <tr
                          v-for="(item, index) in main_second"
                          :key="item.alter_key"
                          v-show="item.is"
                        >
                          <td>{{ item.label }}</td>
                          <template
                            v-if="item.alter_show && item.alter_show == 1"
                          >
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before_name
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after_name
                            }}</td>
                          </template>
                          <template v-else>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after
                            }}</td>
                          </template>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div>
                  <div class="flex align-center justify-between margin-y-15">
                    <div class="fs-16 fw-bolder flex1">副石1信息</div>
                    <a-checkbox @change="change4"
                      ><a class="ele-text-primary fs-14"
                        >不显示未修改数据</a
                      ></a-checkbox
                    >
                  </div>
                  <div>
                    <table
                      cellpadding="0"
                      cellspacing="0"
                      class="recepit_table"
                    >
                      <tbody>
                        <tr>
                          <td style="background-color: #f5f5f5">属性名称</td>
                          <td style="background-color: #f5f5f5">修改前</td>
                          <td style="background-color: #f5f5f5">修改后</td>
                        </tr>
                        <tr
                          v-for="(item, index) in vice_first"
                          :key="item.alter_key"
                          v-show="item.is"
                        >
                          <td>{{ item.label }}</td>
                          <template
                            v-if="item.alter_show && item.alter_show == 1"
                          >
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before_name
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after_name
                            }}</td>
                          </template>
                          <template v-else>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after
                            }}</td>
                          </template>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div>
                  <div class="flex align-center justify-between margin-y-15">
                    <div class="fs-16 fw-bolder flex1">副石2信息</div>
                    <a-checkbox @change="change5"
                      ><a class="ele-text-primary fs-14"
                        >不显示未修改数据</a
                      ></a-checkbox
                    >
                  </div>
                  <div>
                    <table
                      cellpadding="0"
                      cellspacing="0"
                      class="recepit_table"
                    >
                      <tbody>
                        <tr>
                          <td style="background-color: #f5f5f5">属性名称</td>
                          <td style="background-color: #f5f5f5">修改前</td>
                          <td style="background-color: #f5f5f5">修改后</td>
                        </tr>
                        <tr
                          v-for="(item, index) in vice_second"
                          :key="item.alter_key"
                          v-show="item.is"
                        >
                          <td>{{ item.label }}</td>
                          <template
                            v-if="item.alter_show && item.alter_show == 1"
                          >
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before_name
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after_name
                            }}</td>
                          </template>
                          <template v-else>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after
                            }}</td>
                          </template>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div>
                  <div class="flex align-center justify-between margin-y-15">
                    <div class="fs-16 fw-bolder flex1">副石3信息</div>
                    <a-checkbox @change="change6"
                      ><a class="ele-text-primary fs-14"
                        >不显示未修改数据</a
                      ></a-checkbox
                    >
                  </div>
                  <div>
                    <table
                      cellpadding="0"
                      cellspacing="0"
                      class="recepit_table"
                    >
                      <tbody>
                        <tr>
                          <td style="background-color: #f5f5f5">属性名称</td>
                          <td style="background-color: #f5f5f5">修改前</td>
                          <td style="background-color: #f5f5f5">修改后</td>
                        </tr>
                        <tr
                          v-for="(item, index) in vice_third"
                          :key="item.alter_key"
                          v-show="item.is"
                        >
                          <td>{{ item.label }}</td>
                          <template
                            v-if="item.alter_show && item.alter_show == 1"
                          >
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before_name
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after_name
                            }}</td>
                          </template>
                          <template v-else>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_before
                            }}</td>
                            <td :class="{ mohu: item.secret == 1 }">{{
                              item.alter_after
                            }}</td>
                          </template>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <!-- 选择货品弹窗 -->
    <select-goods
      v-if="showCheck"
      v-model:visible="showCheck"
      @load="getDetail"
      @done="done"
    />
    <!-- 批量录入条码弹窗 -->
    <luru v-if="showLuru" v-model:visible="showLuru" @luOpt="luOpt" />

    <!-- 模板导入弹窗 -->
    <ele-modal
      :width="550"
      :visible="visible"
      :confirm-loading="loading"
      title="导入"
      :body-style="{ paddingBottom: '8px' }"
      @update:visible="updateVisible"
      @ok="save"
    >
      <a-form
        :wrapper-col="{ md: { span: 24 }, sm: { span: 24 }, xs: { span: 24 } }"
      >
        <a-row :gutter="24">
          <a-col :md="24" :sm="24" :xs="24">
            <a-form-item>
              <div style="margin: 30px 30px">
                <div class="flex align-center justify-between">
                  <div>请选择导入的文件</div>
                  <a>下载模板文件</a>
                </div>
                <div class="margin-top-15">
                  <a-upload-dragger
                    name="attachment"
                    :data="{ type: 'files' }"
                    v-model:file-list="fileList"
                    :action="uploadUrl"
                    :limit="1"
                    list-type="text"
                    :show-upload-list="true"
                    @change="uploadHandler"
                    @drop="handleDrop"
                  >
                    <div>
                      <loading-outlined v-if="loading" />
                      <img class="daoru_img" src="@/assets/daoru.png" v-else />
                      <div class="ele-text-primary">点击上传</div>
                    </div>
                  </a-upload-dragger>
                </div>
              </div>
              <div>
                <div class="fs-14 color-999"
                  >1、仅支持.xlsx和.csv的Excel文件，推荐.csv文件，导入速度更快。</div
                >
                <div class="fs-14 color-999"
                  >2、3000行以上的数据仅支持.csv文件，请在Excel另存为CSV文件后再导入。</div
                >
                <div class="fs-14 color-999"
                  >3、仅支持Excel文件中第一个表格的数据导入。</div
                >
                <div class="fs-14 color-999"
                  >4、根据表格第一行标题自动匹配数据，第一行作为标题不导入数据。</div
                >
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </ele-modal>
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined
  } from '@ant-design/icons-vue';
  import selectGoods from '@/components/jewelry/select-goods.vue';
  import luru from '@/components/jewelry/luru.vue';
  import { uploadUrl } from '@/config/setting';
  import { actionFn } from '@/utils/action.js';
  import { get_column_templete_list } from '@/api/jewelry/receipts_purchase';
  import {
    receipts_purchase_detail,
    del_goods,
    alter_info,
    batch_enter
  } from '@/api/jewelry/receipts_alter_goods';

  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  const loading = ref(false);
  const receipts_detail = ref({});
  const goods = ref({});
  const visible = ref(false);
  const showCheck = ref(false);
  const showLuru = ref(false);
  //货品list
  const tableData0 = ref([]);
  const goodsTable = ref(null);

  const codeVal = ref(null);

  const fileList = ref([]);
  /* 完全自己控制选择文件后的处理 */
  const uploadHandler = (info) => {
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
    }
  };
  const handleDrop = (e) => {
    console.log('上传', e);
  };

  const onSearch = () => {
    getDetail(1);
  };

  const toSelect = () => {
    showCheck.value = true;
  };
  const getRowSeq = (seq) => {
    //console.log('row111', seq);
    goods.value = tableData0.value[seq - 1];
    getInfo(goods.value.code);
  };
  const delGoods = (row) => {
    Modal.confirm({
      title: '提示',
      content: '确认删除？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        del_goods({ code: query.code, goods_code: row.code })
          .then((res) => {
            message.success(res.msg);
            getDetail(1);
          })
          .catch((e) => {
            message.error(e);
          });
      }
    });
  };
  const edit = (row) => {
    console.log('row==', row);
    push(
      `/jewelry/receipts_alter_goods/edit?code=${query.code}&goods_code=${row.code}&goods_category_code=${row.goods_category_code}`
    );
  };
  const luOpt = (val) => {
    console.log('val', val);
    batch_enter({ code: query.code, goods: val })
      .then((res) => {
        message.success(res.msg);
        getDetail(1);
      })
      .catch((e) => {
        message.error(e);
      });
  };

  const infoInfo = ref([]);
  const main1 = ref([]);
  const vice1 = ref([]);

  onMounted(async () => {
    await getDetail(1);
  });
  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10
  });
  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
    getDetail(currentPage, pageSize);
  };
  const getDetail = (page) => {
    receipts_purchase_detail({
      code: query.code,
      bar_code: codeVal.value,
      page: page
    }).then(async (res) => {
      res.goods.data.forEach((item, index) => {
        item.sku_info.forEach((m, mindex) => {
          item[m.column] =
            m.column_type == 'select' ||
            m.column_type == 'selectajax' ||
            m.column_type == 'selectajaxlike'
              ? m.value_name
              : m.value;
          if (m.column == 'goods_category_code') {
            item[m.column] = m.value;
          }
        });
      });
      tablePage.total = res.goods.total;
      tableData0.value = res.goods.data;
      receipts_detail.value = res.receipts_detail;
      if (res.goods.data.length > 0) {
        goods.value = res.goods.data[0];

        //货品信息 - 基本资料字段
        await get_column_templete_list({
          filters: {
            receipts_type: 1,
            goods_category_code: res.goods.data[0].goods_category_code,
            type: 'sku_info'
          }
        }).then(async (res) => {
          await res.row_list.forEach(async (item, index) => {
            if (item.column_type != 'count') {
              infoInfo.value.push({
                key: item.column,
                label: item.name,
                secret: item.secret
              });
            }
          });
        });
        //货品信息 - 主石字段
        await get_column_templete_list({
          filters: {
            receipts_type: 1,
            goods_category_code: res.goods.data[0].goods_category_code,
            type: 'main_stone'
          }
        }).then(async (res) => {
          await res.row_list.forEach(async (item, index) => {
            if (item.column_type != 'count') {
              main1.value.push({
                key: item.column,
                label: item.name,
                secret: item.secret
              });
            }
          });
        });
        //货品信息 - 副石字段
        await get_column_templete_list({
          filters: {
            receipts_type: 1,
            goods_category_code: res.goods.data[0].goods_category_code,
            type: 'vice_stone'
          }
        }).then(async (res) => {
          await res.row_list.forEach(async (item, index) => {
            if (item.column_type != 'count') {
              vice1.value.push({
                key: item.column,
                label: item.name,
                secret: item.secret
              });
            }
          });
        });
        await getInfo();
      }
    });
  };

  const show = reactive({
    is_show_unalter: 1,
    is_show_unalter_main_first: 1,
    is_show_unalter_main_second: 1,
    is_show_unalter_vice_first: 1,
    is_show_unalter_vice_second: 1,
    is_show_unalter_vice_third: 1,
    is_show_unalter_vice_fourth: 1,
    is_show_unalter_vice_fifth: 1
  });
  const alter = ref([]);
  const main_first = ref([]);
  const main_second = ref([]);
  const vice_first = ref([]);
  const vice_second = ref([]);
  const vice_third = ref([]);
  const getInfo = () => {
    let data = {
      code: query.code,
      goods_code: query.goods_code
    };
    data = { ...data, ...show };
    alter_info(data).then((res) => {
      //货品详情 - 基本资料
      res.data.alter.forEach((item) => {
        infoInfo.value.forEach((m) => {
          if (item.alter_key == m.key) {
            item.is = true;
            item.label = m.label;
            item.secret = m.secret;
          }
        });
      });
      alter.value = res.data.alter;
      console.log('alter.value', alter.value);
      //货品详情 - 主石1
      res.data.alter_main_stone_first.forEach((item) => {
        main1.value.forEach((m) => {
          if (item.alter_key == m.key) {
            item.is = true;
            item.label = m.label;
            item.secret = m.secret;
          }
        });
      });
      main_first.value = res.data.alter_main_stone_first;
      //货品详情 - 主石2
      res.data.alter_main_stone_second.forEach((item) => {
        main1.value.forEach((m) => {
          if (item.alter_key == m.key) {
            item.is = true;
            item.label = m.label;
            item.secret = m.secret;
          }
        });
      });

      main_second.value = res.data.alter_main_stone_second;
      //货品详情 - 副石1
      res.data.alter_vice_stone_first.forEach((item) => {
        vice1.value.forEach((m) => {
          if (item.alter_key == m.key) {
            item.is = true;
            item.label = m.label;
            item.secret = m.secret;
          }
        });
      });
      vice_first.value = res.data.alter_vice_stone_first;
      //货品详情 - 副石2
      res.data.alter_vice_stone_second.forEach((item) => {
        vice1.value.forEach((m) => {
          if (item.alter_key == m.key) {
            item.is = true;
            item.label = m.label;
            item.secret = m.secret;
          }
        });
      });
      vice_second.value = res.data.alter_vice_stone_second;
      //货品详情 - 副石3
      res.data.alter_vice_stone_third.forEach((item) => {
        vice1.value.forEach((m) => {
          if (item.alter_key == m.key) {
            item.is = true;
            item.label = m.label;
            item.secret = m.secret;
          }
        });
      });
      vice_third.value = res.data.alter_vice_stone_third;
    });
  };
  //是否显示货品信息未修该数据
  const change1 = (e) => {
    show.is_show_unalter = e.target.checked ? 0 : 1;
    getInfo(goods.value.code);
  };
  //是否显示主石1信息未修该数据
  const change2 = (e) => {
    show.is_show_unalter_main_first = e.target.checked ? 0 : 1;
    getInfo(goods.value.code);
  };
  //是否显示主石2信息未修该数据
  const change3 = (e) => {
    show.is_show_unalter_main_second = e.target.checked ? 0 : 1;
    getInfo(goods.value.code);
  };
  //是否显示副石1信息未修该数据
  const change4 = (e) => {
    show.is_show_unalter_vice_first = e.target.checked ? 0 : 1;
    getInfo(goods.value.code);
  };
  //是否显示副石2信息未修该数据
  const change5 = (e) => {
    show.is_show_unalter_vice_second = e.target.checked ? 0 : 1;
    getInfo(goods.value.code);
  };
  //是否显示副石3信息未修该数据
  const change6 = (e) => {
    show.is_show_unalter_vice_third = e.target.checked ? 0 : 1;
    getInfo(goods.value.code);
  };

  const save = () => {};
  const done = (form) => {
    let data = {
      url: '/jewelry/receipts_alter_goods/add_goods'
    };
    actionFn(data, form, reloadTable);
  };
  const reloadTable = () => {
    showCheck.value = false;
    getDetail();
  };
  /* 更新visible */
  const updateVisible = (value) => {
    console.log('value', value);
    visible.value = value;
  };
</script>

<style lang="less" scoped>
  :deep(.ant-upload.ant-upload-select.ant-upload-select-text) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 440px !important;
    height: 180px !important;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    .ant-upload {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
</style>
